import styled from 'styled-components'

interface WrapperFace {
  bgImg: string
}

export const BannersWrapper = styled.div<WrapperFace>`
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(${(props) => props.bgImg + '?imageView&blur=40x20'});
  background-size: 6000px;
  background-position: center center;
  .ant-carousel {
    width: 730px !important;
  }
  .arrow {
    width: 37px;
    height: 63px;
    background: url(${require('@/assets/img/banner_arrow.png')});
    cursor: pointer;
  }
  .left_arrow {
    margin-right: 25px;
    background-position: 0 298px;
    &:hover {
      background-position: 0 228px;
    }
  }
  .right_arrow {
    margin-left: 25px;
    background-position: 0 150px;
    &:hover {
      background-position: 0 80px;
    }
  }
`

export const ImgBox = styled.div`
  height: 285px;
  img {
    width: 100%;
    height: 100%;
  }
`

export const DowloadImg = styled.a.attrs({
  href: 'https://music.163.com/#/download',
  target: '_blank'
})`
  width: 254px;
  height: 285px;
  background: url(${require('@/assets/img/download.png')});
`
